function buildImgNews3(articleList) {
  var imgNews = '<div class="newimg3-container">';
  var dots = '<div class="dots-container">';
  for (var i = 0; i < articleList.length; i++) {
    var articleItem = articleList[i];
    imgNews += `<div class="slide-item">
            <img src=${articleItem.aritcleImg} alt="" />
            <div class="header">${articleItem.header}</div>
          </div>`;
    dots += `<span class="dot-item" data-slide="${i}">${i}</span>`;
  }
  imgNews += dots;
  imgNews +=
    '</div><a class="prev">&#10094;</a><a class="next">&#10095;</a></div>';

  $(".parentbox3").html(imgNews);

  newImg3("parentbox3");
}

function buildImgNews13(articleList) {
  var imgNews = '<div class="newimg13-container">';
  var arrows = `
           <a class="prev arrow" data-arrow="-1">&#10094;</a>
      <a class="next arrow" data-arrow="1">&#10095;</a>
          `;
  var dots = '<div class="dots-container">';
  for (var i = 0; i < articleList.length; i++) {
    var articleItem = articleList[i];
    imgNews += `
          <div class="slide-item">
          <img src="${articleItem.aritcleImg}" alt="" />
          <div class="header">${articleItem.header}</div>
        </div>
         `;
    dots +=
      '<span class="dot-item" data-slide="' + i + '">' + (i + 1) + "</span>";
  }
  imgNews += "</div>";
  dots += "</div>";
  $(".parentbox3").append(imgNews);
  $(".parentbox3").append(arrows);
  $(".parentbox3").append(dots);
  newImg13("parentbox3", { w: 1070, h: 340 }, { w: 420, h: 290 }, {});
}

function startMove(obj, json, fn) {
  //1. 先清除上一次的计时器
  clearInterval(obj.timer);
  //2. 开启新的计时器
  obj.timer = setInterval(() => {
    //1. 设置开关
    let flag = true;
    //2. 遍历json对象
    for (let attr in json) {
      //1. 获取当前属性的值
      let cur = null;
      if (attr === "opacity") {
        cur = Math.floor(pparseFloat($(obj).css("opacity")) / 100);
      } else {
        // cur = parseInt(getStyle(obj, attr))
        cur = parseFloat($(obj).css(attr));
      }

      //2. 计算速度
      let speed = (json[attr] - cur) / 8;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      //3. 检测属性是否达成目标
      if (Math.abs(cur - json[attr]) > 3) {
        flag = false;
      }
      //4. 设置运动
      if (attr === "opacity") {
        // obj.style.opacity = (cur + speed) / 100
        // obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')'
        $(obj).css("opacity", (cur + speed) / 100);
        $(obj).css("filter", "alpha(opacity=" + (cur + speed) + ")");
      } else {
        // obj.style[attr] = cur + speed + 'px'
        $(obj).css(attr, cur + speed + "px");
      }
    }
    //3. 检测开关，退出计时器
    if (flag) {
      clearInterval(obj.timer);
      if (fn instanceof Function) {
        fn();
      }
    }
  }, 30);
}
function buildDom(options) {
  // console.log($('.'+className))
  // console.log($(this));
  $("." + "parentbox2").append('<div class="newimg2-container"></div>');
  var ele = "";
  for (var index = 0; index < options.length; index++) {
    ele = `<div class="slide-item"><div class="item-left">
            <img src="${options[index].aritcleImg}" alt="Slide ${index + 1}" />
          </div><div class="item-tight">
            <div class="header">Caption ${options[index].header}</div>
            <hr color="#0c8a7f" />
            <div class="article_body">
              ${options[index].body}
            </div>
          </div>`;
    $("." + "parentbox2" + " .newimg2-container").append(ele);
  }
  var operations =
    '<div class="dots-container"><a href="http://">更多</a><div class="dots"></div></div>';
  $("." + "parentbox2" + " .newimg2-container").append(operations);
  var bg = '<div class="bg"></div>';
  $("." + "parentbox2" + " .newimg2-container .dots").append(bg);
  for (var index = 0; index < options.length; index++) {
    var dotItem = `<span class="dot-item" data-slide="${index + 1}">
              <img src="${options[index].gif}" alt="" />
            </span>`;

    $("." + "parentbox2" + " .newimg2-container .dots").append(dotItem);
  }
}
function buildDom2() {
  var content = '<div class="content"></div>';
  $("." + "parentBox2").append(content);
  var leftArrow = '<div class="leftArrow arrow"></div>';
  $("." + "parentBox2" + " .content").append(leftArrow);
  var rightArrow = '<div class="rightArrow arrow"></div>';
  var container = '<div class="container">';
  for (var index = 0; index < options.length; index++) {
    container += `<div class="item">
                    <img src="./articleImg/image${index + 1}.jpg" alt="">
                    <span>${options[index].header}</span>
                </div>`;
  }
  container += "</div>";

  $("." + "parentBox2" + " .content").append(container);
  console.log($($(".parentBox2 .item")[0]).addClass("itemActive"));
  var bots = '<div class="bots">';
  for (var index = 0; index < options.length; index++) {
    bots += `<div class="pot" data-index="${index}"></div>`;
  }
  bots += "</div>";
  $("." + "parentBox2" + " .content").append(bots);
  $("." + "parentBox2" + " .content").append(rightArrow);
  $("." + "parentBox2" + " .content").append('<div class="bg"></div>');
}
function buildImgNew2() {
  var container = '<div class="newImg2_container"></div>';
  $(".parentbox2").append(container);
  $(".parentbox2 .newImg2_container");
  var leftArrow = '<div class="leftArrow"></div>';
  var rightArrow = '<div class="rightArrow"></div>';
  var bots =
    '<div class="bots"><a href="" class="more">更多</a><div class="pot"><span class="dh_bg"><img src="./img/dh_bg.gif" alt=""></span></div></div>';
  $(".parentbox2 .newImg2_container").append(leftArrow);
  var info = "";
  for (var index = 0; index < options.length; index++) {
    info += `<div class="info">
                <div class="top">
                <img src="${options[index].aritcleImg}" alt="">
                <div class="header">${options[index].header}</div>
                </div>
                <div class="body">${options[index].body}</div>
            </div>`;
  }
  $(".parentbox2 .newImg2_container").append(info);
  $($(".parentbox2 .newImg2_container .info")[0]).addClass("itemActive");
  $(".parentbox2 .newImg2_container").append(rightArrow);
  $(".parentbox2 .newImg2_container").append(bots);
  var item = "";
  for (var index = 0; index < options.length; index++) {
    item += `<span class="dot-item" data-slide="${index}">
                        <img src="${options[index].gif}" alt="" />
                    </span>`;
  }
  $(".parentbox2 .newImg2_container .pot").append(item);
}
function buildNewImg5() {
  var container = '<div class="newImg5_container"></div>'
  $('.parentbox2').append(container)
  $('.parentbox2 .newImg5_container')
  var leftArrow = '<div class="leftArrow"></div>'
  var rightArrow = '<div class="rightArrow"></div>'
  $('.parentbox2 .newImg5_container').append(leftArrow)
  var item = ''
  for (var index = 0; index < options.length; index++) {
      item += `<div class="item">
  <div class="top">
      <img src="${options[index].aritcleImg}" alt="">
      <div class="header">${options[index].header}</div>
      <div class="bg"></div>
  </div>
      <div class="body">${options[index].body}</div>
      <a href="" class="more">>>详细信息${index}</a>
  </div>`
  }
  $('.parentbox2 .newImg5_container').append(item)
  $($('.parentbox2 .newImg5_container .item')[0]).addClass('itemActive')
  $('.parentbox2 .newImg5_container').append(rightArrow)
  var item = '<div class="pot">'
  for (var index = 0; index < options.length; index++) {
      item += `<span class="dot-item" data-slide="${index}">
              ${index+1}
          </span>`
  }
  item+='</div>'
  $('.parentbox2 .newImg5_container').append(item)
}
function buidlDOM14(options) {
  var hd = '<div class="hd"><ul></ul></div>'
            var bd = '<div class="bd"><ul></ul></div>'
            $('.parentbox2').append(hd)
            $('.parentbox2').append(bd)
            var li = ''
            var item = ''
            for (var index = 0; index < options.length; index++) {
                li += '<li></li>'
                item += `<li><a href="${options[index].href}" target="_blank"><img src="${options[index].articleImg}" /> <s> <font>${options[index].header1}<br>${options[index].header2}</font></s></a></li>`
            }
            $('.parentbox2 .hd ul').append(li)
            // console.log($($('.parentbox2 .hd ul li')[0]).addClass('on'));
            $('.parentbox2 .bd ul').append(item)
}
